<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.util.List" import="com.eudi.dubbo.common.User"%>
<%
	List<User> users = (List<User>) request.getAttribute("users");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link
	href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
	rel="stylesheet" />
<style type="text/css">
td {
	width: 60px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"	src="/js/ext-all.js"></script>
<script type="text/javascript">
	Ext.define('StudentDataModel', {
	    extend: 'Ext.data.Model',
	    fields: [
	    {name: 'name', mapping : 'name'},
	    {name: 'sex', mapping : 'sex'},
	    {name: 'age', mapping : 'age'},
	    {name: 'marks', mapping : 'marks'}
	    ]
	 });
	
	Ext.onReady(function(){
        // Store data
        var myData = [
           { name : "毛泽东", sex: "1", age : "16", marks : "90" },
           { name : "周恩来", age : "18", marks : "95", sex: "1" },
           { name : "刘少奇", age : "20", marks : "68", sex: "2" },
           { name : "朱德", age : "21", marks : "86", sex: "1" },
           { name : "林彪", age : "22", marks : "57", sex: "2" }
        ];
        // Creation of first grid store
        var gridStore = Ext.create('Ext.data.Store', {
        model: 'StudentDataModel',
        data: myData
        });
        // Creation of first grid
        Ext.create('Ext.grid.Panel', {
           id                : 'gridId',
           store             : gridStore,
           stripeRows        : true,
           title             : '学生信息表格', // Title for the grid
           renderTo          :'gridDiv', // Div id where the grid has to be rendered
           width             : 600,
           collapsible       : true, // property to collapse grid
           enableColumnMove  :true, // property which alllows column to move to different position by dragging that column.
           enableColumnResize:true, // property which allows to resize column run time.
           columns           :
              [{ 
                 header: "姓名",
                 dataIndex: 'name',	
                 id : 'name',    
                 flex:  1,  		 // property defines the amount of space this column is going to take in the grid container with respect to all.	
                 sortable: true, // property to sort grid column data. 
                 hideable: true  // property which allows column to be hidden run time on user request.
              },{ 
                  header: "姓别",
                  dataIndex: 'sex',	
                  id : 'sex',    
                  flex:  1,  		 // property defines the amount of space this column is going to take in the grid container with respect to all.	
                  sortable: true, // property to sort grid column data. 
                  hideable: true  // property which allows column to be hidden run time on user request.
               },{
                 header: "年龄", 
                 dataIndex: 'age',
                 flex: .5, 
                 sortable: true,
                  hideable: false // this column will not be available to be hidden.
              },{
                 header: "介绍",
                 dataIndex: 'marks',
                 flex: .5, 
                 sortable: true, 
                 // renderer is used to manipulate data based on some conditions here who ever has marks greater than 75 will be displayed as 'Distinction' else 'Non Distinction'.
                 renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
                    if (value > 75) {
                       return "Distinction";	  
                    } else {
                       return "Non Distinction";
                    }
                 }
           }]
        });
     });
	
	function fSubmit(){
		document.getElementById("myForm").submit();
	}
	
	function fDelete(id){
		// 创建一个 form 
		var form1 = document.createElement("form"); 
		form1.name = "formDel"; 
		// 添加到 body 中 
		document.body.appendChild(form1); 
		  // 创建一个输入 
		  var input = document.createElement("input"); 
		  // 设置相应参数 
		  input.type = "hidden"; 
		  input.name = "id"; 
		  input.value = id; 
		  // 将该输入框插入到 form 中 
		  form1.appendChild(input); 
		  // form 的提交方式 
		  form1.method = "POST"; 
		  // form 提交路径 
		  form1.action = "/user/delete"; 
		  // 对该 form 执行提交 
		  form1.submit(); 
		  // 删除该 form 
		  document.body.removeChild(form1); 
	}
	
	Ext.onReady(function() {
		Ext.create('Ext.Panel', {
			renderTo : 'helloWorldPanel',
			height : 100,
			width : 200,
			title : 'Hello world',
			html : 'First Ext JS Hello World Program'
		});
	});
	
</script>
<style type="text/css">
body {
	text-align: center
}

form {
	margin: 0 auto;
	width: 400px;
	border: 1px solid #ad9
}
</style>
</head>
<body>
	<div style="width: 100%; height: 300px;">
		<form id="myForm" action="/user/add" method="post"
			style="width: 400px;">
			<table>
				<tr>
					<td>ID:</td>
					<td><input name="id" type="text" /></td>
				</tr>
				<tr>
					<td>姓名</td>
					<td><input name="name" type="text" /></td>
				</tr>
				<tr>
					<td>性别</td>
					<td><input name="sex" type="text" /></td>
				</tr>
				<tr>
					<td>年龄</td>
					<td><input name="aqe" type="text" /></td>
				</tr>
				<tr>
					<td>住址</td>
					<td><input name="address" type="text" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" value="保存"
						style="width: 80px" onclick="javascript:fSubmit();" /></td>
				</tr>
			</table>
		</form>
	</div>
	<div style="">
		<table border="1" style="margin: 0 auto;">
			<tr align="center">
				<th>id</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th width="150px">住址</th>
				<th>删除</th>
				<th>详细</th>
			</tr>
			<%
				for (int i = 0; i < users.size(); i++) {
					User u = users.get(i);
					if(i % 2 == 0) {
			%>
			<tr align="center" style="background-color: #dddddd;">
			<%
					}else {
			%>
			<tr align="center" style="background-color: #ffffff;">
			<%
					}
			%>
				<td><%=u.getId()%></td>
				<td><%=u.getName()%></td>
				<td><%=u.getSex()%></td>
				<td><%=u.getAge()%></td>
				<td><%=u.getAddress()%></td>
				<td><a href="javascript:fDelete(<%=u.getId()%>);">删除</a></td>
				<td><a href="">详细</a></td>
			</tr>
			<%
				}
			%>

		</table>
	</div>
	<div id="helloWorldPanel"></div>
	<div id = "gridDiv"></div>
</body>
</html>